<template>
	<view class="content">
		<view class="tabbar">
			<view v-for="(tab, index) in tabs" :key="tab.id" class="tab" :class="{ active: current === index }"
				@click="changeTab(index)">
				{{ tab.name }}
			</view>
		</view>
		<view class="search" v-if='current == 0'>
			<view class="search_input">
				<image src="../../static/order_search_img.png" mode="" class="search_img" @click='search'></image>
				<view class="search_item" @click='search'>搜索 | </view>
				<view class="search_more">累计：完成0单，补贴￥0</view>
			</view>

		</view>
		<scroll-view scroll-y="true" @scrolltolower="getList" class="scroll-view">
			<view class="listItem" v-for="(item,index) in carList " :key='index'>
				<view class="detail">
					<image :src='item.couponCode' mode="widthFix" class="detail_img" @click="goDetail(item)"></image>
					<view class="detail_right">
						<view class="disSB">
							<view class="coupon_name">
								{{item.name}}
							</view>
							<view
								:class="[item.state == 2 || item.state == 4  ? 'war' : item.state == 3 ? 'red' : item.state == 5 ? 'green' : item.state == 6 ? 'gray' :  ''  ,'state_name']">
								{{item.state == 2 ? '待审核' : item.state == 3 ? '驳回' : item.state == 4 ? '交易中' : item.state == 5 ? '已完成' : item.state == 6 ? '失效' : ''}}
							</view>
						</view>
						<view class="gaeey">
							<view class="">
								<text class="lable">上传时间:</text>
								<text class="value">{{item.createTime}}</text>
							</view>
							<view class="">
								<text class="lable">回收价格:</text>
								<text class="value">￥{{item.buyPrice}}</text>
							</view>
							<view class="">
								<text class="lable">补贴:</text>
								<text class="value">￥{{item.subsidy}}</text>
							</view>
							<view class="">
								<text class="lable">失效时间:</text>
								<text class="value">{{item.lifespan}}</text>
							</view>
							<view class="" @click="copyText(item.code)">
								<text class="lable">兑换码:</text>
								<text class="value blue">{{item.code}}</text>
							</view>

						</view>
					</view>
				</view>

			</view>
			<view v-if="carList.length <= 0 " class='none_box'>
				<image src='../../static/image/none.png' mode="widthFix" class="none_data"></image>
				<view class="none_msg">暂无数据</view>
			</view>
		</scroll-view>
		<view class="back" v-if="searchView">
			<view class="centent">
				<view class="title">
					搜索订单
				</view>
				<view class="c">
					<image src="../../static/order_search_img.png" mode="widthFix" style="width:40rpx" @click='search'>
					</image>
					<input v-model="name" type="text" class="search_input" placeholder="请输入品牌名称" />
				</view>
				<view class="btns">
					<view class="btna" @click="searchView = false">
						取消
					</view>
					<view class="btnb" @click="changeTab(0)">
						搜索
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		cardList
	} from '@/api.js'
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '待审核'
					},
					{
						id: 3,
						name: '失效'
					},
					{
						id: 4,
						name: '交易中'
					},
					{
						id: 5,
						name: '已完成'
					}
				],
				name: '',
				state: 1,
				pageNo: 1, //页面偏移量
				pageSize: 10, //每页数量
				total: 0, //总数量
				carList: [], //搜索结果
				dateNone: false, //数据是否到底了
				searchView: false,
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			copyText(code) {
				if (code) {
					uni.setClipboardData({
						data: code,
						success() {
							uni.showToast({
								title: '复制成功',
								icon: 'success'
							});
						}
					});
				}

			},
			goDetail(item) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/orderDetail/orderDetail?id=' + item.id
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}

			},
			// 打开搜索框
			search() {
				this.searchView = true
			},
			async getList() {
				if (this.dateNone) {
					return
				}
				const res = await cardList({
					name: this.name,
					state: this.state,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				});
				console.log('res', res.result.records);
				this.total = res.result.total
				if (this.pageNo === 1) {
					this.carList = res.result.records
				} else {
					this.carList = this.carList.concat(res.result.records)
				}
				if (this.pageNo > 1 && this.total <= (this.pageNo * this.pageSize)) {
					this.dateNone = true
				} else {
					this.dateNone = false
					this.pageNo = this.pageNo + 1
				}

			},
			changeTab(index) {
				console.log('index', index);
				// 若不是全部，需要把搜索框清空
				if (index != 0) {
					this.name = ''
				}
				this.current = index;
				this.state = index + 1;
				this.carList = [];
				this.pageNo = 1;
				this.dateNone = false;
				this.searchView = false
				this.getList()
			}
		},

	}
</script>

<style scoped>
	.back {
		background: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back .centent {
		width: 500rpx;
		height: 200rpx;
		padding: 20rpx 0;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.content {
		background: #f9f9f9;
	}

	.centent .title {
		height: 60rpx;
		line-height: 60rpx;
	}

	.centent .c {
		display: flex;
		align-items: center;
		height: 80rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.c .search_input {
		padding-left: 20rpx;
		box-sizing: border-box;
		background: none;
	}

	.none_data {
		width: 300rpx;
	}

	.none_msg {
		margin-top: 40rpx;
	}

	.none_box {
		width: 100%;
		flex-direction: column;
		padding-top: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btns {
		position: absolute;
		bottom: 0;
		display: flex;
		width: 100%;
		border-top: 1rpx solid #999;
	}

	.btna {
		height: 60rpx;
		width: 50%;
		text-align: center;
		line-height: 60rpx;

	}

	.btnb {
		height: 60rpx;
		width: 50%;
		text-align: center;
		line-height: 60rpx;
		background: #2f7dfd;
		color: #fff;
	}

	.tabbar {
		width: 100%;
		display: flex;
		position: relative;
	}

	.tab {
		flex: 1;
		padding: 20rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
	}

	.tab.active {
		font-weight: bold;
		color: #2f7dfd;
	}


	.audit {
		height: 100vh;
		background-color: #f2f2f2;
	}

	.lose {
		height: 100vh;
		background-color: #f2f2f2;
	}

	.completed {
		height: 100vh;
		background-color: #f2f2f2;
	}

	.tab-content {
		padding: 10rpx 0;
		margin-top: 10rpx;
	}


	.tab-content {
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.search_input {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		padding: 0 120rpx;
		background-color: #eeeeee;
	}

	.search_img {
		width: 40rpx;
		height: 40rpx;
	}

	.search_item {
		margin: 0 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #2f7dfd;
	}

	.search_more {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #a09d9a;
	}

	.scroll-view {
		width: 750rpx;
		height: calc(100vh - 80rpx - 80rpx - var(--window-bottom));
		background: #f9f9f9;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}


	.listItem {
		background: #fff;
		width: 710rpx;
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 30rpx 0;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.createTime {
		font-size: 28rpx;
	}

	.disC {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.detail_img {
		width: 120rpx;
		border-radius: 10rpx;
	}

	.detail_right {
		width: calc(100% - 120rpx);
		margin-left: 40rpx;
	}

	.gaeey {
		color: #999;
		margin-top: 10rpx;
	}

	.lable {
		font-size: 24rpx;
		width: 120rpx;
		display: inline-block;
	}

	.value {
		font-size: 24rpx;
	}

	.disSB {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.state_name {
		font-size: 24rpx;
	}

	.coupon_name {
		font-size: 28rpx;
		font-weight: 600;
	}

	.war {
		color: orange;
	}

	.red {
		color: red;
	}

	.green {
		color: green;
	}

	.blue {
		color: #2f7dfd;
	}

	.gray {
		color: gray;
	}
</style>